// 右侧固定导航
import React, { useState } from 'react'
import './rightnav.css'
import PopupImage from '../Rnav';
function Rightnav() {
    const [isHovered, setIsHovered] = useState(false);
    const [isHovered1, setIsHovered1] = useState(false);
    const [isHovered2, setIsHovered2] = useState(false);
    const [isHovered3, setIsHovered3] = useState(false);
    // const [istan, setIstan] = useState(false);
    // const [istan1, setIstan1] = useState(false);
    // const [istan2, setIstan2] = useState(false);
    // const [istan3, setIstan3] = useState(false);
    // const [istan4, setIstan4] = useState(false);


    // 返回顶部
    const scrollToTop = () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };
    // 售后服务
    const souhou=()=>{
        window.location.href='/chat'
    }

    // 常见问题
    const wen=()=>{
        window.location.href='/problem'
    }
    return (
        <div className='right_nav'>

            <div style={{ marginTop: '50px' }}>
                <PopupImage
                    imageSrc="https://s.ibaotu.com/next/img/new/person.b254.png"
                    popupSrc="https://js.ibaotu.com/revision/img/qyvip/20230519/img_qy_cela_first.png?v=20230529"
                    label1="企业"
                    label2="VIP"
                />
            </div>

            <PopupImage
                imageSrc="https://s.ibaotu.com/next/img/new/ep.4814.png"
                popupSrc="https://s.ibaotu.com/next/img/new/h2.bd5a.png"
                label1="个人"
                label2="VIP"
            />

            <div>
                <div className='div'>
                    <img src='https://js.ibaotu.com/revision/plus/img/public/icon_plus_logo3.png'></img>
                    <p>
                        企业
                    </p>
                    <p>站</p>
                </div>
            </div>

            <PopupImage
                imageSrc="https://s.ibaotu.com/next/img/new/components/aside-right/edit.49fa.gif"
                popupSrc="https://js.ibaotu.com/act/21/10/28/617a5435f1382.png"
                label1="在线"
                label2="设计"
            />

            <PopupImage
                imageSrc="https://s.ibaotu.com/img/activity/zq.png"
                popupSrc="https://js.ibaotu.com/revision/img/other/money/img_make_money.png"
                label1="赚钱"
            />

            <div
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
            >
                {isHovered ? (
                    <div >
                        <p>用户</p>
                        <p>福利</p>
                    </div>
                ) : (
                    <div >
                        <i className='iconfont icon-lihe'></i>
                    </div>
                )}

            </div>

            <div
                onMouseEnter={() => setIsHovered1(true)}
                onMouseLeave={() => setIsHovered1(false)}
            >
                {isHovered1 ? (
                    <div style={{position:'relative',marginLeft:'13px'}}>
                        <p>联系</p>
                        <p>客服</p>
                        <div style={{ width: '200px', height: '230px', background: '#fff', position: 'absolute', top: '-55px', left: '-209px', color: 'black' }}>
                            <div style={{ display: 'flex', alignItems: 'center', padding: '10px' }}>
                                <div style={{ padding: '10px' }}>
                                    <i className='iconfont icon-kefu'></i>
                                </div>
                                <div>
                                     <p>企业客服</p>
                                     <p className='ke_text'>工作时间:9.30-18:30</p>
                                     <button style={{borderRadius:'15px',border:'none',background:'yellow',padding:'5px',marginRight:'5px'}} onClick={souhou}>售前资询</button>
                                     <button style={{borderRadius:'15px',border:'none',background:'yellow',padding:'5px'}} onClick={souhou}>售后服务</button>
                      
                                </div>
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', padding: '10px' }}>
                                <div style={{ padding: '10px' }}>
                                    <i className='iconfont icon-kefu'></i>
                                </div>
                                <div>
                                    <p>企业客服</p>
                                    <p className='ke_text'>工作时间:9.30-18:30</p>
                                    <p className='ke_text'>热线电话：021-31770313</p>
                                    <button style={{ borderRadius: '15px', border: 'none', background: 'orange', padding: '5px' }}>在线资询</button>
                                </div>
                               

                            </div>

                            <div onClick={wen} style={{ display: 'flex', alignItems: 'center',  padding: '10px' }}>
                            <div style={{ padding: '10px' }} >
                                    <i className='iconfont icon-wenti'></i>
                                </div>
                                    <p style={{color:'blue'}}>常见问题？</p>
                                </div>
                        </div>
                    </div>
                ) : (
                    <div className="icon" >
                        <i className='iconfont icon-kefu'></i>
                        <p>客服</p>
                    </div>

                )}
            </div>

            <div
                onMouseEnter={() => setIsHovered2(true)}
                onMouseLeave={() => setIsHovered2(false)}
            >
                {isHovered2 ? (
                    <div className="text">
                        <p>意见</p>
                        <p>反馈</p>
                    </div>
                ) : (
                    <div className="icon">
                        <i className='iconfont icon-yijian'></i>

                    </div>
                )}
            </div>


            <div style={{ marginBottom: '50px' }}
                onMouseEnter={() => setIsHovered3(true)}
                onMouseLeave={() => setIsHovered3(false)}
            >
                {isHovered3 ? (
                    <div className="text" onClick={scrollToTop}>
                        <p>回到</p>
                        <p>顶部</p>
                    </div>
                ) : (
                    <div className="icon">
                        <i className='iconfont icon-fanhuidingbu'></i>

                    </div>
                )}
            </div>

        </div>
    )
}

export default Rightnav
